<!-- 编辑/添加产品 -->
<template>
  <div class="abb-page">
    <div>
      <img
        src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/dxgjAdmin/userImg/logo1658470349386.png"
      />
    </div>
    <div v-if="!cz.id || (jhber.title && cz.id)">
      <div class="fz48">
        <p>
          <span class="henxinase"></span>
        </p>

        <n-input
          class="fz32 br0"
          placeholder=""
          size="medium"
          v-model:value="jhber.title"
          clearable
        ></n-input>
      </div>

      <div class="mt50 display-flex">
        <div class="flex-1">
          <richText ref="fwb"></richText>
        </div>
        <div class="ml20 fdgfdgdfrr">
          <div class="pr sdfsdrrerer" @click="photoShowModaler = true">
            <img class="cpfm" :src="jhber.fm" />
            <div class="kkmdfsdrre cf fz32 vertical-center sz">
              点击上传图片
            </div>
          </div>
        </div>
      </div>
      <p class="fz26 b mt40">资料</p>
      <div class="jjhjjhweerw aa">
        <div class="kkwerrwe" v-for="(item, idx) in dataList" :key="idx">
          <div class="mediaresource pr">
            <img :src="item.fm" class="w100 h100 fehkjnerrw" />
            <i
              class="iconfont dx-shanchu red fz20 del-iconerrw"
              @click="delzlFun(idx)"
            ></i>
          </div>
          <p class="fz22 pt10">{{ item.title }}</p>
        </div>

        <div
          class="mediaresource vertical-center fz32 z9 sz"
          @click="showModal = true"
        >
          +点击添加资料
        </div>
      </div>

      <p class="fz12 z9 mt20">(以下效果在前端不展示)</p>
      <div class="mt10 display-flex">
        产品类型:
        <n-radio-group
          v-model:value="jhber.dxleujne"
          name="radiogroup"
          class="ml10"
        >
          <n-space>
            <n-radio
              v-for="song in newOpt"
              :key="song.value"
              :value="song.value"
            >
              {{ song.label }}
            </n-radio>
          </n-space>
        </n-radio-group>
      </div>
      <div class="mt20">
        <n-radio-group name="radiogroup">
          <n-space>
            <n-checkbox v-model:checked="jhber.sstj">
              <span class="fz24">设为首页案例展示</span></n-checkbox
            >
          </n-space>
        </n-radio-group>
        <div class="mt15 display-flex" style="width: 600px" v-if="jhber.sstj">
          <div class="flex-1 mr20">
            <n-input
              placeholder="请输入跳转链接"
              v-model:value="jhber.homehref"
            />
          </div>
          <div class="vertical-center z9">(为空跳转产品详情)</div>
        </div>
      </div>
      <div class="mt20">
        <n-button type="primary" size="medium" @click="addCp" :loading="loading"
          >{{ isbj ? "修改" : "添加" }}产品</n-button
        >
        <n-button size="medium" class="ml20" @click="Back">返回上一页</n-button>
      </div>
    </div>
    <n-empty description="找不到该产品或已删除" size="huge" class="mt40" v-else>
    </n-empty>
    <n-modal
      v-model:show="photoShowModaler"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>上传/选择封面</div>
      </template>
      <div>
        <photoGallery @getImg="getImger" types="abb产品图"></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModaler = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="geturler"> 确定 </n-button>
        </div>
      </template>
    </n-modal>

    <n-modal v-model:show="showModal" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>添加资料</div>
      </template>
      <div>
        <n-form
          ref="formRef"
          size="medium"
          label-placement="left"
          :label-width="70"
          :model="formdata"
          :rules="rules"
        >
          <n-form-item label="封面" path="fm">
            <div
              class="headPortrait-box vertical-center sz dsfsdrerw"
              @click="photoShowModalsan = true"
            >
              <img :src="formdata.fm" v-if="formdata.fm" />
              <i class="iconfont dx-tupian fz30" v-else> </i>
            </div>
          </n-form-item>
          <n-form-item label="标题" path="title">
            <n-input placeholder="请输入标题" v-model:value="formdata.title" />
          </n-form-item>

          <n-form-item label="跳转链接" path="url">
            <div class="display-flex">
              <div class="flex-1">
                <n-input
                  placeholder="请输入跳转链接"
                  v-model:value="formdata.url"
                />
              </div>
            </div>
          </n-form-item>
        </n-form>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="showModal = false"> 取消 </n-button>

          <n-button type="primary" @click="tijiaofrom" class="ml20"
            >确认</n-button
          >
        </div>
      </template>
    </n-modal>

    <n-modal
      v-model:show="photoShowModalsan"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>添加资料封面</div>
      </template>
      <div>
        <photoGallery @getImg="getImgsan" types="abb资料封面"></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModalsan = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="geturlsan">
            确定
          </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
 <script lang='ts' setup>
import { nextTick, ref } from "vue";
import { dxget, dxpost, callBack, qurl } from "../../../util";
import photoGallery from "../../../components/util/photoGallery";
import richText from "../../../components/util/richText.vue";
const fwb = ref();
const loading = ref(false);
const cz = qurl();
const isbj = ref(false); // 是否为编辑的状态
const showModal = ref(false);
const photoShowModalsan = ref(false);
const formRef = ref();
const dataList = ref([]);

const formdata = ref({
  fm: "",
  title: "",
  url: "",
});
const rules = {
  fm: [
    {
      required: true,
      message: "请上传封面！",
    },
  ],
  title: [
    {
      required: true,
      message: "请输入标题",
    },
  ],

  url: [
    {
      required: true,
      message: "请输入跳转链接",
    },
  ],
};

const jhber = ref({
  title: "",
  details: "",
  fm: "",
  sstj: true,
  homehref: "",
  dxleujne: "1",
  datum: "",
});
const newOpt = [
  {
    label: "交流充电桩",
    value: "1",
  },
  {
    label: "直流充电桩",
    value: "2",
  },
  {
    label: "大功率液冷超充系统",
    value: "3",
  },
];
const Back = callBack;
const photoShowModaler = ref(false);
let videUrler = "";
let videUrlsan = "";
const getImger = (data) => {
  videUrler = data;
};

const getImgsan = (data) => {
  videUrlsan = data;
};

const geturler = () => {
  photoShowModaler.value = false;
  jhber.value.fm = videUrler;
};

const geturlsan = () => {
  photoShowModalsan.value = false;
  formdata.value.fm = videUrlsan;
};

// 添加产品
const addCp = async () => {
  jhber.value.details = fwb.value.getHtml();
  loading.value = true;
  if (dataList.value.length > 0) {
    jhber.value.datum = JSON.stringify(dataList.value);
  }

  const res = await dxpost(
    "abb/abbproduct",
    jhber.value,
    isbj.value ? "PUT" : "POST"
  );
  console.log(res);
  loading.value = false;
  window.$message.success("添加成功");
  Back();
};

const initData = async () => {
  let { data }: any = await dxget("abb/abbproduct", cz);
  console.log(data);
  jhber.value = data;
  await nextTick();
  fwb.value.setHtml(data.details);
  jhber.value.dxleujne = "" + data.dxleujne;
  if (jhber.value.datum) {
    dataList.value = JSON.parse(jhber.value.datum);
  }

  jhber.value.sstj = data.sstj == 1 ? true : false;
};
if (cz.id) {
  initData();
  isbj.value = true;
}

const tijiaofrom = async () => {
  formRef.value?.validate(async (errors) => {
    const obj = JSON.parse(JSON.stringify(formdata.value));
    dataList.value.push(obj);
    await nextTick();
    formdata.value = { fm: "", title: "", url: "" };
    showModal.value = false;
  });
};

const delzlFun = (idx) => {
  dataList.value.splice(idx, 1);
};
</script>
 <style scoped>
.fdgfdgdfrr {
  width: 490px;
}
.cpfm {
  width: 100%;
  min-height: 450px;
  border: 0;
  background: #f8f8f8;
}
.kkmdfsdrre {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: none;
}
.sdfsdrrerer {
  background: #f8f8f8;
}
.sdfsdrrerer:hover .kkmdfsdrre {
  display: flex;
}
.del-iconerrw {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
</style>